<template>
<div>
  <common-header>景点详情</common-header>
  <detail-banner
    :detailInfo = "detailInfo"
  ></detail-banner>
  <detail-list :categoryList="detailInfo.categoryList"></detail-list>

</div>
</template>

<script>
    import DetailBanner from './components/Banner'
    // import DetailHeader from './components/Header'
    import CommonHeader from 'common/header'
    import DetailList from './components/list'
    import axios from 'axios'
    export default {
        name: "detail",
        data(){
          return{
            id:null,
            detailInfo:{},

          }
        },
        components:{
          DetailBanner,
          // DetailHeader,
          CommonHeader,
          DetailList
        },
        mounted(){
            this.id = this.$route.params.id
            axios.get('/api/detail.json').then((res,req)=>{
              this.getBannerImg(res)
            })
        },
        methods:{
          getBannerImg(res){
            if(this.id && res.data.ret){
                res = res.data
                const result = res.data.find((item)=>{
                    return item.id == this.id
                })
                this.detailInfo = result;
            }
          }
        }
    }
</script>

<style lang="stylus" scoped>
.content
  height 50rem
</style>
